<template>
  <div class="container">
    <el-dialog
      title="订单修改"
      :visible.sync="detailsDialog.centerDialogVisible"
      @open="getData"
      @close="cancel"
      center
      width="99%"
    >
      <el-table
        :data="tableData"
        border
        max-height="500"
        style="width: 100%"
        empty-text="暂无数据"
      >
        <el-table-column
          prop="goods_name"
          label="商品名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="erp_goods_code"
          label="商品编码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="spec"
          label="规格"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="unit"
          label="单位"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="cost_price"
          label="成本价"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="order_price"
          label="订单价格"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="stockRemoval"
          label="订单总额"
          align="center"
        ></el-table-column>
        <!-- <el-table-column label="选择批次商品" align="center" width="150px">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.batch_id"
              placeholder="请选择批次商品"
              @change="getOptionId(scope.row.batch_id, scope)"
            >
              <el-option
                v-for="item in scope.row.unAvgBatchData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column> -->
        <el-table-column label="数量" align="center" width="150px">
          <template slot-scope="scope">
            <el-input-number
              size="small"
              @change="orderNum(scope)"
              :controls="false"
              v-model="scope.row.order_num"
            ></el-input-number>
          </template>
        </el-table-column>

        <el-table-column label="加价" align="center" width="150px">
          <template slot-scope="scope">
            <el-input-number
              size="small"
              @change="markup(scope)"
              :controls="false"
              v-model="scope.row.markup"
            ></el-input-number>
          </template>
        </el-table-column>

        <el-table-column label="预提费" align="center" width="150px">
          <template slot-scope="scope">
            <el-input-number
              size="small"
              @change="markup(scope)"
              :controls="false"
              v-model="scope.row.withholding_fee"
            ></el-input-number>
          </template>
        </el-table-column>

        <el-table-column label="件数" align="center" width="150px">
          <template slot-scope="scope">
            <el-input-number
              size="small"
              @change="qrtnum(scope)"
              :controls="false"
              v-model="scope.row.qrtnum"
            ></el-input-number>
          </template>
        </el-table-column>

        <!-- <el-table-column label="操作" align="center" width="150px">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="danger"
              @click="remove(scope)"
              icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getSaleOrderInfo,
  editSaleOrder,
} from "@/api/middleorder/middleorderlist";

export default {
  props: {
    detailsDialog: Object,
  },
  data() {
    return {
      tableData: [],
      commodity: "",
      inside: {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false,
      },
      goodsList: [],
      ispici: false,
      isnum: false,

      insides: {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false,
      },
    };
  },
  methods: {
    cancel() {
      this.detailsDialog.centerDialogVisible = false;
      this.inside = {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false,
      };
      (this.ispici = false),
        (this.isnum = false),
        (this.insides = {
          innerVisible: false,
          option: [],
          value: "",
          list: [],
          loading: false,
        });
      this.commodity = "";
    },
    getData() {
      console.log(this.detailsDialog.id, 34444444);
      let data = {
        id: this.detailsDialog.id,
      };
      getSaleOrderInfo(data).then((res) => {
        if (res.code == 0) {
          res.data.info.goods.forEach((result) => {
            result.order_price = (
              parseFloat(result.cost_price) +
              parseFloat(result.markup) +
              parseFloat(result.withholding_fee)
            ).toFixed(4);
            result.stockRemoval = (
              result.order_price * result.order_num
            ).toFixed(4);

            result.qrtnum = result.qty;
          });
          this.tableData = res.data.info.goods;
        }
      });
      let datas = {
        page: 1,
        limit: 100,
      };
    },
    //删除
    remove(scope) {
      let id = scope.row.erp_goods_code;
      this.tableData.forEach((res, index) => {
        if (res.erp_goods_code == id) {
          this.tableData.splice(index, 1);
        }
      });
      this.priceNum = 0;
    },
    //修改加价
    markup(scope) {
      //订单总额
      scope.row.order_price = (
        parseFloat(scope.row.cost_price) +
        parseFloat(scope.row.markup) +
        parseFloat(scope.row.withholding_fee)
      ).toFixed(4);
      scope.row.stockRemoval = (
        scope.row.order_price * scope.row.order_num
      ).toFixed(4);
      this.$set(this.tableData, scope.$index, scope.row);
    },
    //修改数量
    orderNum(scope) {
      scope.row.stockRemoval = (
        scope.row.order_price * scope.row.order_num
      ).toFixed(4);
      this.$set(this.tableData, scope.$index, scope.row);
    },
    //件数
    qrtnum(scope) {
      console.log(scope.row.qrtnum, 44444455);
      this.$set(this.tableData, scope.$index, scope.row);
    },

    //确定
    confirm() {
      this.tableData.forEach((res) => {
        if (res.order_num) {
          this.isnum = true;
        } else {
          this.isnum = false;
          return;
        }
      });
      if (!this.isnum) {
        this.$message({
          type: "info",
          message: "请填写数量",
        });
        return;
      }
      let arr = [];
      this.tableData.forEach((res) => {
        arr.push({
          id: res.id,
          goods_id: res.goods_id,
          erp_goods_id: res.erp_goods_id,
          erp_goods_code: res.erp_goods_code,
          goods_name: res.goods_name,
          order_num: res.order_num,
          qty: res.qrtnum,
          markup: res.markup,
          batch_id: res.batch_id,
          withholding_fee: res.withholding_fee,
        });
      });

      let data = {
        id: this.detailsDialog.id,
        goods: JSON.stringify(arr),
      };

      editSaleOrder(data).then((res) => {
        if (res.code == 0) {
          this.$message({
            type: "success",
            message: res.msg || res.message,
          });
          this.$emit("upData");
          this.cancel();
        }
      });
    },
  },
};
</script>
<style scoped>
.pagination {
  text-align: right;
  padding: 10px;
}
.top {
  margin-bottom: 5px;
}
</style>